<template>
    <el-form v-if="goodsDetail.orderNumber" :model="goodsDetail" status-icon :rules="rules" ref="goodsDetail" label-width="100px" class="order-ruleForm">
        <h2>积分订单详情</h2>
        <el-form-item label="订单号：" prop="orderNumber">{{ goodsDetail.orderNumber }}</el-form-item>
        <el-form-item label="兑换名称:" prop="goodsName">{{ goodsDetail.integralGoods.goodsName }}</el-form-item>
        <el-form-item label="兑换积分:" prop="integral">{{ goodsDetail.integralGoods.integral }}</el-form-item>
        <el-form-item label="兑换价格:" prop="goodsPrice">{{ goodsDetail.integralGoods.goodsPrice }}</el-form-item>
        <el-form-item label="兑换日期：" prop="orderCreateTime">{{ goodsDetail.orderCreateTime }}</el-form-item>
        <el-form-item label="联系人：" prop="userName">{{ goodsDetail.userName }}</el-form-item>
        <el-form-item label="联系电话：" prop="userMobile">{{ goodsDetail.userMobile }}</el-form-item>
        <el-form-item label="联系地址：" prop="userAddress">{{ goodsDetail.userAddress }}</el-form-item>
        <el-form-item label="订单状态：" prop="orderStatus">
            <el-select v-model="goodsStatus" placeholder="请选择状态">
                <el-option label="待付款" :value="1"></el-option>
                <el-option label="待发货" :value="2"></el-option>
                <el-option label="已发货" :value="3"></el-option>
                <el-option label="已完成" :value="4"></el-option>
            </el-select>
        </el-form-item>
        <br>
        <el-form-item>
            <el-button type="primary" @click="submitForm('goodsDetail')">提交</el-button>
            <el-button @click="backForm()">返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex'
export default {
    created(){
        let orderNumber = this.$route.query.orderNumber; 
        this.getGoodsDetail({orderNumber:orderNumber});
    },
    data() {
        return {
            rules:{
                goodsStatus:[{ required: true, message: '请选择状态', trigger: 'blur' }],
            },
        };
    },
    computed:{
        ...mapState({
            goodsDetail:state => state.jifenModule.goodsDetail
        }),
        goodsStatus:{
            get(){
                return this.goodsDetail.orderStatus;
            },
            set(value){
                this.updateGoodsStatus(value);
            }
        }
    },
    methods: {
        ...mapActions({
            getGoodsDetail:'jifenModule/getGoodsDetail',
            updataGoodsDetail:'jifenModule/updataGoodsDetail'
        }),
        ...mapMutations({
            updateGoodsStatus:'jifenModule/updateGoodsStatus'
        }),
        submitForm(formName) {
            let params = {
                orderNumber: this.goodsDetail.orderNumber,
                orderStatus: this.goodsStatus
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.updataGoodsDetail(params).then((res)=>{
                        if(res.status == 1){
                            const loading = this.$loading({
                                lock: true,
                                text: '更改成功',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            setTimeout(() => {
                                loading.close();
                                this.$router.push({path:'/jifen'})
                                this.$store.dispatch('jifenModule/getGoodOrderList');
                            }, 600)  
                        }else{
                             this.$alert('更新失败，请重试').then(()=>{
                                 this.$router.push('/jifen');
                             })
                        }
                    })                      
                } else {
                    return false
                }
            })
        },
        backForm() {
            this.$router.push({path:'/jifen'})
        },
    }
}
</script>

<style lang="scss" scoped>
.order-ruleForm .el-form-item{
    margin-bottom: 12px !important;
}
</style>



